<template>
  <div :class="{'hidden':hidden}" class="pagination-container">
    <el-pagination
        :current-page="currentPage"
        :page-size="pageSize"
        :page-count='totalPage'
        :page-sizes="pageSizes"
        :background="background"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import { scrollTo } from '@/utils/scroll-to'

export default {
  name: 'AppPagination',
  // 对外属性 内部使用和变更的重新定义变量
  props: {
    // 数据总数
    total: {
      required: true,
      type: Number
    },
    // 当前页码数
    currentPage: {
      type: Number,
      default: 1
    },
    // 每页条数
    pageSize:{
      type:Number,
      default:50,
    },
    // 可以选择的每页条数items
    pageSizes: {
      type: Array,
      default() {
        return [1500, 1000, 500, 100, 50]
      }
    },
    // 移动端页码按钮的数量端默认值5 显示页码数按钮的个数
    pagerCount: {
      type: Number,
      default: document.body.clientWidth < 992 ? 5 : 7
    },
    // 设置layout，表示需要显示的内容，用逗号分隔，布局元素会依次显示。 prev表示上一页，next为下一页，pager表示页码列表，
    // 除此以外还提供了jumper和total，size和特殊的布局符号->，->后的元素会靠右显示，jumper表示跳页元素，total表示总条目数，size用于设置每页显示的页码数量
    layout: {
      type: String,
      default: 'total, sizes, prev, pager, next, jumper'
    },
    background: {
      type: Boolean,
      default: true
    },
    autoScroll: {
      type: Boolean,
      default: true
    },
    hidden: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {

    };
  },
  // 计算属性
  computed: {
    // 获取总页码数
    totalPage() {
      return this.getTotalPage()
    }
  },
  activated() {
    this.getTotalPage()
  },
  methods: {
    /**
     * 变更每页条数
     * @param val
     */
    handleSizeChange(val) {
      console.log('每页条数变更为：', val)
      let targetPage = this.currentPage
      if (this.currentPage * val > this.total) {
        targetPage = 1
      }
      this.$emit('pagination', { pageNum: targetPage, pageSize: val })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },

    /**
     * 更改当前页码数
     * @param val
     */
    handleCurrentChange(val) {
      console.log('当前页码数变更为：', val)
      this.$emit('pagination', { pageNum: val, pageSize: this.pageSize })
      if (this.autoScroll) {
        scrollTo(0, 800)
      }
    },

    /**
     * 根据数据总条数
     */
    getTotalPage() {
      if (this.pageSize == 0 || this.total == 0) {
        return 0;
      }
      // 两个整数相除 可能会返回一个浮点数结果 向下取整就是你想拿到的最大整数
      let totalPage = Math.floor(this.total / this.pageSize);
      console.log('totalPage:', totalPage)
      // 取余数
      const remain = this.total % this.pageSize;
      if (remain > 0) {
        totalPage += 1;
      }
      return totalPage;
    },
  }
}
</script>

<style scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
.pagination-container.hidden {
  display: none;
}
</style>
